<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义列表标签演示</title>
    <style>
        dl {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <dl>
            <dt>HTML</dt>
            <dd>制作网页的标准语言，控制网页的结构</dd>

            <dt>CSS</dt>
            <dd>层叠样式表，控制网页的样式</dd>

            <dt>JavaScript</dt>
            <dd>脚本语言，控制网页的行为</dd>
        </dl>
    </div>

    <div>
        <dl id="list">

        </dl>
    </div>
</body>


<script>
    let list = [{
        imgUrl: "http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d880ff45a9a3b70527770e01521fc939.jpg?thumb=1&w=250&h=250&f=webp&q=90",
        title: '小米10 至尊版',
        desc: '120X 变焦/120W秒充/120Hz屏幕',
        price: '5299'
    }, {
        imgUrl: "http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b19bf0e7e599c1bbbce510fb0dbc8bc.jpg?thumb=1&w=250&h=250&f=webp&q=90",
        title: 'Redmi K30 至尊版',
        desc: '120Hz弹出全面屏，天玑1000+旗舰处理器',
        price: '4999'
    }, {
        imgUrl: "http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/237942bfcaf2bbe82fbe966c2f584d69.jpg?thumb=1&w=250&h=250&f=webp&q=90",
        title: '腾讯黑鲨3S',
        desc: '骁龙865处理器，120Hz刷新率',
        price: '3999'
    }]
    window.onload = function() {
        let str = ``;
        for (let i = 0; i < list.length; i++) {
            let phone = list[i];
            str += `<dt>
                <img src="${phone.imgUrl}" alt="小米10 至尊版" width="160" height="160">
            </dt>
            <dd>
                <h3 class="title">${phone.title}</h3>
                <p class="desc">${phone.desc}</p>
                <p class="price">
                    <span class="num">${phone.price}元起</span>
                </p>
            </dd>`;
        }
        document.querySelector("#list").innerHTML = str;
    }
</script>

</html>